<template>
  <div class="index-header-box">
    <div class="index-header">
      <router-link :to="{name:'search'}" class="search-input pull-left" :class="{'active':keyword!=''}">{{keyword!=''?keyword:'请输入搜索关键字'}}</router-link>

      <router-link class="msg pull-left" :to="{name:'userMessage'}">
        <i class="msg-number" v-if="count>0">{{count}}</i>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Header",
    components: {},
    data() {
      return {
        count:0,
          keyword: this.$route.query.keyword||'',
      }
    },
    computed: {},
    mounted: function () {
        this.init();
    },
    methods: {
      init(){
        this.$api.car.getMsgCount().then(res=>{
            var res=res.data;

            this.count=res.data['count'];
        });
      },
    },
  }
</script>
<style lang="scss">
  @import "../assets/scss/core/base";
  .search-input {
    @include wh(532px, 66px, 66px);
    background: #fff url('../assets/images/find.png') left 21px center no-repeat;
    background-size: auto 35px;
    border-radius: 33px;
    margin-top: 30px;
    margin-left: 42px;
    display: block;
    color: #C8C8C8;
    font-size: 30px;
    padding-left: 80px;
    box-sizing: border-box;
  }

  .search-input.active{
    color: #0C0C0C;
  }

  .msg {
    display: block;
    @include wh(60px, 56px);
    margin-left: 57px;
    margin-top: 35px;
    background: url('../assets/images/icon/msg-white.png');
    background-size: 100% 100%;
    position: relative;

    .msg-number {
      display: block;
      @include wh(auto, 24px, 24px);
      padding: 0 6px;
      color: $uni-text-color-inverse;
      font-size: 18px;
      position: absolute;
      border-radius: 11px;
      background: $uni-bg-color-red;
      left: 40px;
      top: -8px
    }
  }
</style>
